<!DOCTYPE html>
<html lang='zh-cmn-Hans'>
<head>
  <!-- <script src='https://cdn.jsdelivr.net/npm/eruda'></script>
<script>
  eruda.init()
</script> -->
  <base href="/"/>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit"/>
  <meta
    name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
  />
  <title>AIChatX-成为您的人工智能助手。</title>
  <link rel="icon" href="favicon.ico"/>
  <script src="libs/abp/abp.js"></script>
  <script src="libs/signalr/signalr.js"></script>
  <script src="libs/alicdn/font_2510092_d93etv9ngz.js"></script>
  <script src="iconfont/iconfont.js"></script>
</head>

<body class='dark:bg-black'>
<script>
  (() => {
    var htmlRoot = document.getElementById('htmlRoot');
    var theme = window.localStorage.getItem('__APP__DARK__MODE__');
    if (htmlRoot && theme) {
      htmlRoot.setAttribute('data-theme', theme);
      theme = htmlRoot = null;
    }
  })();
</script>
<div id='app'>
  <style>
      .loading-wrap {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
      }

      .balls {
          width: 4em;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: space-between;
      }

      .balls div {
          width: 0.8em;
          height: 0.8em;
          border-radius: 50%;
          background-color: #ff8838;
      }

      .balls div:nth-of-type(1) {
          transform: translateX(-100%);
          animation: left-swing 0.5s ease-in alternate infinite;
      }

      .balls div:nth-of-type(3) {
          transform: translateX(-95%);
          animation: right-swing 0.5s ease-out alternate infinite;
      }

      @keyframes left-swing {
          50%,
          100% {
              transform: translateX(95%);
          }
      }

      @keyframes right-swing {
          50% {
              transform: translateX(-95%);
          }

          100% {
              transform: translateX(100%);
          }
      }

      @media (prefers-color-scheme: dark) {
          body {
              background: #121212;
          }
      }
  </style>
  <div class='loading-wrap'>
    <div class='balls'>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>
<script type='module' src='/src/main.ts'></script>
</body>
</html>
